<template>
  <div id="container"></div>
</template>

<script>
import * as THREE from 'three'
import { SceneBasic } from '../js/scene-basic'
export default {
  data() {
    return {}
  },
  mounted() {
    //几何物体合并对象
    const ThreeBSP = require('three-js-csg')(THREE) //引入老版本的three.js
    //创建初始化对象
    const sceneBasic = new SceneBasic()

    //创建地面开始
    //导入纹理
    const textureLoader = new THREE.TextureLoader()
    const cao = require('./static/cao.png')
    const cao_texture = textureLoader.load(cao)
    //设置纹理偏移
    cao_texture.offset.x = 0
    cao_texture.offset.y = 0
    //设置纹理旋转
    cao_texture.rotation = 0
    //设置旋转的中心角度
    cao_texture.center.set(0, 0)
    //设置纹理重复
    cao_texture.repeat.set(1, 1)
    //纹理显示设置
    cao_texture.minFilter = THREE.NearestFilter
    cao_texture.magFilter = THREE.NearestFilter
    //创建地面
    const planeGeometry = new THREE.PlaneGeometry(1000, 1000, 100, 100)
    const planeMaterial = new THREE.MeshBasicMaterial({
      color: '#ccccc',
      map: cao_texture,
    })
    planeMaterial.side = THREE.DoubleSide
    const plane = new THREE.Mesh(planeGeometry, planeMaterial)
    plane.rotation.x = -0.5 * Math.PI
    sceneBasic.scene.add(plane)
    //创建地面结束

    //开始建房子
    //导入纹理
    const qiang = require('./static/qiang.png')
    const qiang_texture = textureLoader.load(qiang)
    //设置纹理偏移
    qiang_texture.offset.x = 0
    qiang_texture.offset.y = 0
    //设置纹理旋转
    qiang_texture.rotation = 0
    //设置旋转的中心角度
    qiang_texture.center.set(0, 0)
    //设置纹理重复
    qiang_texture.repeat.set(2, 1)
    //设置重复模式
    qiang_texture.wrapS = THREE.RepeatWrapping
    qiang_texture.wrapT = THREE.RepeatWrapping
    //纹理显示设置
    // qiang_texture.minFilter = THREE.LinearFilter
    // qiang_texture.magFilter = THREE.LinearFilter
    //生成墙壁
    const hoseSize = 300
    const qiang_data = {
      width: hoseSize,
      height: hoseSize / 2,
      thickness: 10,
    }
    const cubeGeometry = new THREE.BoxGeometry(
      qiang_data.width,
      qiang_data.height,
      qiang_data.thickness
    )
    const cubeMaterial = new THREE.MeshBasicMaterial({
      //   color: '#000000',
      map: qiang_texture,
      transparent: true, //黑色透明
      // alphaMap: aplha,
    })
    const cube_1 = new THREE.Mesh(cubeGeometry, cubeMaterial) //墙壁1
    const cube_2 = new THREE.Mesh(cubeGeometry, cubeMaterial) //墙壁2
    const cube_3 = new THREE.Mesh(cubeGeometry, cubeMaterial) //墙壁3
    //墙壁4
    const cube_4 = new THREE.Mesh(
      new THREE.BoxGeometry(
        qiang_data.width + qiang_data.thickness,
        qiang_data.height,
        qiang_data.thickness
      ),
      cubeMaterial
    )
    //房顶
    const cube_5 = new THREE.Mesh(
      new THREE.BoxGeometry(
        qiang_data.width + qiang_data.thickness,
        qiang_data.width,
        qiang_data.thickness
      ),
      cubeMaterial
    ) //墙壁3
    //设置墙壁位置
    cube_1.position.set(
      -(qiang_data.thickness / 2),
      qiang_data.height / 2,
      qiang_data.height
    )
    cube_2.position.set(
      -(qiang_data.thickness / 2),
      qiang_data.height / 2,
      -qiang_data.height
    )
    cube_3.position.set(-qiang_data.height, qiang_data.height / 2, 0)
    cube_3.rotation.y = Math.PI / 2
    cube_5.position.set(0, qiang_data.height, 0)
    cube_5.rotation.x = Math.PI / 2

    sceneBasic.scene.add(cube_1)
    sceneBasic.scene.add(cube_2)
    sceneBasic.scene.add(cube_3)
    sceneBasic.scene.add(cube_5)

    //制作门
    const door = new THREE.Mesh(
      new THREE.BoxGeometry(10, hoseSize / 2, hoseSize / 5),
      new THREE.MeshBasicMaterial({
        color: '#000000',
      })
    )
    //设置墙体和窗户的位置
    door.position.set(qiang_data.width / 2, 0, qiang_data.width / 4)
    cube_4.position.set(qiang_data.height, qiang_data.height / 2, 0)
    cube_4.rotation.y = Math.PI / 2
    // sceneBasic.scene.add(door)
    // 3 定义两个bsp对象
    // var cubeBSP = new ThreeBSP(cube_4)
    // var doorBSP = new ThreeBSP(door)
    // // 4 取交集
    // let resultBSP = cubeBSP.subtract(doorBSP) // 墙体挖窗户
    // // 5 将相交的部分转换成Mesh
    // let result = resultBSP.toMesh()
    // // 6 转成geometry
    // const cubeDoorGeometry = result.geometry
    // const cube_4_door = new THREE.Mesh(cubeDoorGeometry, cubeMaterial)
    // cube_4_door.position.set(qiang_data.height, qiang_data.height / 2, 0)
    // cube_4_door.rotation.y = Math.PI / 2
    // //添加合并后的墙体
    sceneBasic.scene.add(cube_4)
    //相机位置
    sceneBasic.camera.position.set(500, 500, 500)

    //渲染
    sceneBasic.renderer.setClearColor(0x5fb6c1, 1)
    sceneBasic.render()
  },
}
</script>

<style></style>
